<template>
  <div class="main">
    <view v-if="loading">Loading...</view>
    <view v-else>
      <BarChart :data="chartData" />
    </view>
  </div>
</template>

<script setup>

import {reactive, onMounted, ref} from 'vue';
import BarChart from "@/items/home_items/BarChart.vue";
import router from "@/router";

const chartData = ref({
    labels: [],
    views: [],
    plays: []
});

const loading = ref(true);

const fetchData = async () => {
  const formData = new FormData();
  // 在此添加需要发送的表单数据
  // formData.append('key', 'value');
  formData.append('key', localStorage.getItem('key'));
  try {
    const response = await fetch("https://movie.cpb2013.top/admin/views.php?mode=get_website_and_video", {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
      },
      body: formData,
    });

    if (!response.ok) {
      throw new Error('Network response was not ok');
    }

    const data = await response.json();
    // 将获取到的数据存入 cardData 中
    if(data['status'] === 'success')
    {
      Object.assign(chartData.value, data['data']['chartData']);
      console.log(chartData.value);
      loading.value=false;
    }
    else if (data['status'] === 'danger') {
      localStorage.removeItem('key');
      await router.push('/login'); // Use router to navigate to the login page
    }
  } catch (error) {
    console.error('There was a problem with the fetch operation:', error);
  }
/*  finally {

  }*/
};

onMounted(() => {
  fetchData();
});
</script>

<style>
.main {
  height: 400px;
  width: 800px;
  color: #2c3e50;
  padding: 40px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
